.contain{
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fb6b00,endcolorstr=#fb7000,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fb6b00,endcolorstr=#fb7000,gradientType=0);/*IE8*/
    background: #fb6b00; /* 一些不支持背景渐变的浏览器 */
    background:-moz-linear-gradient(top, #fb6b00, rgb(251, 112, 0));
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fb6b00), to(rgb(251, 112, 0)));
    background:-o-linear-gradient(top, #fb6b00, rgb(251, 112, 0));
    padding-bottom: 1rem;
}
.contain img{
    width:100%;
    display: block;
}
.bagbox{
    width:100%;
    position:relative;

}
.bagbox .open{
    width: 20%;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 33px;
    animation: open 0.8s linear 0s infinite alternate;
    -moz-animation: open 0.8s linear 0s infinite alternate; 	/* Firefox */
    -webkit-animation: open 0.8s linear 0s infinite alternate;	/* Safari 和 Chrome */
    -o-animation: open 0.8s linear 0s infinite alternate;	/* Opera */
}
.bagbox .bag{
    width:78%;
    margin: auto;
}
.contain .rule{

    border-top:1px dashed #ffed7d;
    color:#ffed7d;
    width:86%;
    margin:1rem auto 0px auto;

}
.rule .ruleRow{
    margin:0.4rem auto 0px auto;
}
.ruleRow p{
    font-size:0.85rem;
    line-height:1.5rem;
}
.ruleRow .ruleTitle{
    font-size:0.95rem;
}

.loginBox,.expireBox{
    position: fixed;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    display: none;

}
.graybg{
    width:100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
    background-color: rgba(0,0,0,0.5);

}
.loginBox .stepbox,.expireBox .expire{
    width:80%;
    margin: auto;
    top:50%;
    position: absolute;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    margin: auto;
    left:0px;
    right:0px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 1.2rem 0px;
    display: none;
}
.expireBox .expire{
    display: block!important;
}
.expire img.ex{
    width: 27%;
    margin: 0 auto 0.8rem auto;
}
.expire p{
    text-align: center;
    font-size: 0.95rem;
    margin: 1.4rem auto;
}

.loginBox .validate{
    display: none;
}
.stepbox .close,.expire .close{
    position:absolute;
    height:45px;
    top:-45px;
    right:0px;
    width: auto;
}
.login .loginimg{
    width: 27%;
    margin: 0 auto 0.8rem auto;
}
.login p{
    text-align: center;
    font-size: 0.95rem;
}
.stepbox input{
    outline: none;
    border-width: 0;
    text-align: center;
    padding: 0.5rem 0px;
    line-height: 1.5rem;
    width: 80%;
    margin: 0.4rem auto;
    font-size: .95rem;
    -webkit-appearance: none;
    border-bottom: 1px solid #da251d;
    color:#888;
}
.stepbox .btn,.expire .btn{
    width:80%;
    display: block;
    background-color:#da251d;
    color:#fff;
    border-radius: 5px;
    text-align: center;
    line-height: 2.2rem;
    margin: 1rem auto 0 auto;
}
.validate{

}
.validate .headTitle{
    position:relative;
    line-height: 2rem;
}
.validate .headTitle .returnBack{
    width:1.2rem;
    height: 1.2rem;
    background-image: url(../img/grayback.png);
    background-size: cover;
    left:10px;
    top:0px;bottom:0px;
    margin: auto;
    display: block;
    position:absolute;
}
.validate .phone{
    line-height: 2.6rem;
    margin:1rem auto;
    color:#a4a4a4;
}
.validate .sendCode{
    font-size:0.9rem;
    padding:.3rem .4rem;
    border-radius: 5px;
    border:1px solid #cccccc;
    color:#cccccc;
    margin-left: 0.3rem;

}
.loading{
    position: fixed;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    display: none;
}
.loading img{
    width:22%;
    position: absolute;
    top:0px;bottom:0px;left:0px;right:0px;
    margin: auto;
}
.bagBox{
    position: fixed;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    display: none;
}
.bagBox .bagAll{
    position: absolute;
    width:80%;
    margin: auto;
    top:52%;
    position: absolute;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    margin: auto;
    left:0px;
    right:0px;
    text-align: center;
}
.bagAll img{
    width:100%;
}
.bagAll .bagback{
    position: relative;
}
.bagAll .bagfont{
    position: absolute;
    top:0px;
    left:0px;
    z-index:12;
}
.bagAll .result{
    width:80%;
    margin: auto;
    position: absolute;
    top:0px;
    -webkit-transform: translateY(40%);
    -ms-transform: translateY(40%) ;
    -o-transform: translateY(40%) ;
    -moz-transform: translateY(40%) ;
    transform:  translateY(40%);
    z-index:11;
    left:0px;right:0px;
}
.bagAll .goto{
    position: absolute;
    bottom: 30px;
    color: #fff;
    z-index: 14;
    margin: auto;
    left: 50%;
    font-size: 0.95rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%) ;
    -o-transform: translateX(-50%) ;
    -moz-transform: translateX(-50%) ;
    transform:  translateX(-50%);

}
.result .resultTxt{
    position: absolute;
    left:0px;right:0px;
    top:12px;
}
.scoreTxt{
    top:20px !important;
}
.bagTxt{
    display: none;
}
.resultTxt p.title{
    color:#712c1d;
    font-size:0.95rem;
}
.title span{
    color:#da251d;
    font-size:1.05rem;
}
.resultTxt .sign{
    font-size:0.8rem;
    color:#333333;
}
.resultTxt .score{
    color:#da2513;
    font-size:2.4rem;
}
.score span{
    font-size:1rem;
}
.openbagAnaimate{
    animation: openbag 0.4s linear 0s forwards;
    -moz-animation: openbag 0.4s linear 0s forwards; 	/* Firefox */
    -webkit-animation: openbag 0.4s linear 0s forwards;	/* Safari 和 Chrome */
    -o-animation: openbag 0.4s linear 0s forwards;	/* Opera */
}
@keyframes open
{
    from {
        -webkit-transform:scale(1) ;
        -ms-transform:scale(1) ;
        -o-transform:scale(1) ;
        -moz-transform:scale(1) ;
        transform: scale(1);
    }
    to {
        -webkit-transform:scale(1.2) ;
        -ms-transform:scale(1.2) ;
        -o-transform:scale(1.2) ;
        -moz-transform:scale(1.2) ;
        transform: scale(1.2);

    }
}

@-moz-keyframes open /* Firefox */
{
    from {
        -webkit-transform:scale(1) ;
        -ms-transform:scale(1) ;
        -o-transform:scale(1) ;
        -moz-transform:scale(1) ;
        transform: scale(1);

    }
    to {
        -webkit-transform:scale(1.2) ;
        -ms-transform:scale(1.2) ;
        -o-transform:scale(1.2) ;
        -moz-transform:scale(1.2) ;
        transform: scale(1.2);

    }
}

@-webkit-keyframes open /* Safari 和 Chrome */
{
    from {
        -webkit-transform:scale(1) ;
        -ms-transform:scale(1) ;
        -o-transform:scale(1) ;
        -moz-transform:scale(1) ;
        transform: scale(1);

    }
    to {
        -webkit-transform:scale(1.2) ;
        -ms-transform:scale(1.2) ;
        -o-transform:scale(1.2) ;
        -moz-transform:scale(1.2) ;
        transform: scale(1.2);

    }
}

@-o-keyframes open /* Opera */
{
    from {
        -webkit-transform:scale(1) ;
        -ms-transform:scale(1) ;
        -o-transform:scale(1) ;
        -moz-transform:scale(1) ;
        transform: scale(1);

    }
    to {
        -webkit-transform:scale(1.2) ;
        -ms-transform:scale(1.2) ;
        -o-transform:scale(1.2) ;
        -moz-transform:scale(1.2) ;
        transform: scale(1.2);

    }
}


@keyframes openbag
{
    from {
        -webkit-transform: translateY(40%);
        -ms-transform: translateY(40%) ;
        -o-transform: translateY(40%) ;
        -moz-transform: translateY(40%) ;
        transform:  translateY(40%);
    }
    to {
        -webkit-transform: translateY(5%);
        -ms-transform: translateY(5%) ;
        -o-transform: translateY(5%) ;
        -moz-transform: translateY(5%) ;
        transform:  translateY(5%);

    }
}

@-moz-keyframes openbag /* Firefox */
{
    from {
        -webkit-transform: translateY(40%);
        -ms-transform: translateY(40%) ;
        -o-transform: translateY(40%) ;
        -moz-transform: translateY(40%) ;
        transform:  translateY(40%);
    }
    to {
        -webkit-transform: translateY(5%);
        -ms-transform: translateY(5%) ;
        -o-transform: translateY(5%) ;
        -moz-transform: translateY(5%) ;
        transform:  translateY(5%);

    }
}

@-webkit-keyframes openbag /* Safari 和 Chrome */
{
    from {
        -webkit-transform: translateY(40%);
        -ms-transform: translateY(40%) ;
        -o-transform: translateY(40%) ;
        -moz-transform: translateY(40%) ;
        transform:  translateY(40%);
    }
    to {
        -webkit-transform: translateY(5%);
        -ms-transform: translateY(5%) ;
        -o-transform: translateY(5%) ;
        -moz-transform: translateY(5%) ;
        transform:  translateY(5%);

    }
}

@-o-keyframes openbag /* Opera */
{
    from {
        -webkit-transform: translateY(40%);
        -ms-transform: translateY(40%) ;
        -o-transform: translateY(40%) ;
        -moz-transform: translateY(40%) ;
        transform:  translateY(40%);
    }
    to {
        -webkit-transform: translateY(5%);
        -ms-transform: translateY(5%) ;
        -o-transform: translateY(5%) ;
        -moz-transform: translateY(5%) ;
        transform:  translateY(5%);

    }
}
.tipBox{
    position: absolute;
    top: 50%;
    left:50%;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.92rem;
    padding: 0.8rem 1rem;
    border-radius: 5px;
    max-width: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%) ;
    -o-transform: translateY(-50%) translateX(-50%) ;
    -moz-transform:translateY(-50%) translateX(-50%) ;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    display: none;
}
.bagBox .shopBtn{
    width: 40%;
    position: absolute;
    bottom: 15%;
    left: 30%;
    z-index: 111;

}
.bagbox .shopBtn img{
    width:100%;
}
